<template>
  <crumbs></crumbs>
  <div class="wrapper">
    <div class="box" style="display: flex">
      <!-- 普通按钮防抖 -->
      <el-button v-debounce="btnClick">v-debounce</el-button>

      <!-- 按钮防抖能传fn、type、time -->
      <el-button type="primary" v-debounce2="{ fn: btnClick }">debounce</el-button>

      <!-- 一键复制 -->
      <el-button type="primary" v-copy="'copy'">copy</el-button>

      <!-- 双击复制 -->
      <el-button type="primary" v-copy.dblclick="'dblclick copy'">dblclick copy</el-button>

      <!-- icon 复制 -->
      <el-button type="primary" v-copy.icon="'icon copy'">icon copy</el-button>

      <!-- 权限 -->
      <el-button v-permiss="'admin'" @click="permissBtnClick">v-permiss</el-button>
      <!-- 长按 -->
      <el-button v-longpress:[seconds]="longpressFn">v-longpress</el-button>
    </div>

    <div class="inputs">
      <!-- 正整数 -->
      <el-input v-model="inputNumber" v-inputNumber> <template #prepend>正整数</template></el-input>
      <!-- 两位小数 -->
      <el-input v-model="input2Point" v-input2Point>
        <template #prepend>俩位小数</template></el-input
      >
      <!-- 千位符 -->
      <el-input v-model="inputThousand" v-inputThousand>
        <template #prepend>千位符</template></el-input
      >
    </div>

    <div class="imgs">
      <!-- 普通图片 -->
      <img src="~@/assets/images/user.jpg" alt="" />

      <!-- 组件形式使用预览组件、需要注意路径（使用绝对路径） -->
      <PreviewImage src="/src/assets/images/user.jpg"></PreviewImage>

      <!-- 组件插槽形式预览组件 -->
      <PreviewImage>
        <img src="/src/assets/images/user.jpg" alt="" />
      </PreviewImage>

      <!-- 指令使用预览组件 -->
      <img src="~@/assets/images/user.jpg" alt="" v-preview />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const seconds = ref(1000)
const inputNumber = ref('')
const input2Point = ref('')
const inputThousand = ref('')

const permissBtnClick = () => {
  ElMessage.success('只有admin角色能看到我呦')
}
const btnClick = () => {
  ElMessage.warning('btnClick 连续点击只会触发一次呦')
}

const longpressFn = () => {
  ElMessage.success('长按')
}
</script>

<style lang="less" scoped>
.imgs {
  margin-top: 20px;
  img {
    width: 200px;
    height: 100px;
    margin: 0 10px;
  }
  /deep/ .previewImg {
    img {
      width: 200px;
      height: 100px;
    }
  }
}
.inputs {
  .el-input {
    margin-top: 10px;
  }
}
</style>
